<template>
  <div>
    <!-- 标题栏 -->
    <van-nav-bar
      class="nav"
      title="编辑资料"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <!-- <mt-header title="编辑资料" fixed>
      <mt-button slot="left" @click="$router.go(-1)" icon="back"></mt-button>
    </mt-header> -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image
            @click="imageClickFn"
            style="width: 60px"
            round
            class="avatar"
            :src="urlSrcShow"
          />
          <!-- file选择框 -->
          <input
            type="file"
            ref="iptFile"
            v-show="false"
            accept="image/*"
            @change="onFileChange"
          />
        </template>
      </van-cell>
      <van-cell
        title="昵称"
        @click="nameClickFn"
        is-link
        :value="userInfo.nickName"
      ></van-cell>
      <van-cell
        @click="birthClickFn"
        title="生日"
        is-link
        :value="userInfo.birthday"
      ></van-cell>
    </van-cell-group>

    <!-- 姓名修改弹窗 -->
    <van-dialog
      autofocus
      v-model="show"
      title="请输入您要修改的昵称"
      show-cancel-button
      :before-close="beforeCloseFn"
    >
      <input type="text" v-model="inputUserName" />
    </van-dialog>

    <!-- 时间选择器 -->
    <van-popup
      round
      v-model="dataClickShow"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <!-- 弹出层.组件可以搭配使用 -->
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="dateCancel"
        @confirm="dateConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { Notify } from "vant";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      // 控制姓名修改输入框的出现与否
      show: false,
      inputUserName: "", //修改名字弹出框输入框绑定的值
      minDate: new Date(1900, 1, 1),
      maxDate: new Date(),
      currentDate: new Date(2000, 1, 17),
      dataClickShow: false, //日期选择器显示与否
    };
  },
  mounted() {
    // console.log(this.userInfo, "@@@@@");
  },
  computed: {
    ...mapState("user", [
      "userInfo",
      "loginStatus",
      "urlSrcAdd",
      "urlSrcDefaul",
    ]),
    urlSrcShow() {
      if (this.userInfo.avatarDef) {
        // console.log(`${this.urlSrcAdd}${this.userInfo.avatar}`);
        return this.urlSrcDefaul;
      } else {
        return `${this.urlSrcAdd}${this.userInfo.avatar}`;
      }
    },
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    ...mapMutations("user", ["updateOnceProperty"]),
    // 文件选择事件
    onFileChange(e) {
      if (e.target.length == 0) return;
      // console.log(e.target.files[0]);
      const formdata = new FormData();
      formdata.append("userid", this.userInfo.userid);
      formdata.append("avatar", e.target.files[0]);
      this.axios
        .post("/users/avatarchange", formdata, {
          "Content-type": "multipart/form-data",
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            Notify({
              type: "success",
              message: "头像修改成功!",
            });
            this.updateOnceProperty({
              key: "avatar",
              value: res.data.data,
            });
            this.updateOnceProperty({
              key: "avatarDef",
              value: false,
            });
          }
        });
    },
    // 图片点击事件
    imageClickFn() {
      this.$refs.iptFile.click();
    },

    // 修改昵称
    // 姓名点击事件
    nameClickFn() {
      this.show = true; //让弹窗出现
      this.inputUserName = this.userInfo.nickName;
    },
    // 姓名确认框关闭前的回调函数
    beforeCloseFn(action, done) {
      // console.log(action);
      if (action == "confirm") {
        // 确定
        let reg = /^[0-9a-zA-Z\u4e00-\u9fa5]{1,7}$/;
        if (reg.test(this.inputUserName)) {
          // 通过了验证
          // console.log(this.inputUserName,this.userInfo.userid);
          done();
          let params = `nickName=${this.inputUserName}&userid=${this.userInfo.userid}`;
          this.axios.post("/users/nickchange", params).then(res => {
            if (res.data.code == 200) {
              this.userInfo.nickName = this.inputUserName; //回显到页面上
              Notify({
                type: "success",
                message: "昵称修改成功!",
              });
              this.updateOnceProperty({
                key: "nickName",
                value: this.inputUserName,
              });
            } else {
              Notify({
                type: "success",
                message: "昵称修改失败!",
              });
            }
          });
        } else {
          // 没通过校验
          done(false);
          Notify({
            type: "warning",
            message: "用户名只能是1-7位中英文数字组合",
          });
        }
      } else {
        // 取消
        done(); //让弹窗关闭
      }
    },

    // 修改年龄
    birthClickFn() {
      this.dataClickShow = true;
      this.currentDate = new Date(this.userInfo.birthday);
    },
    // 取消修改年龄
    dateCancel() {
      this.dataClickShow = false;
    },
    // 完成修改年龄
    dateConfirm() {
      // let birth=this.moment.unix(this.currentDate).format('YYYY-MM-DD HH:MM:SS'),unix是时间戳
      let birth = this.moment(this.currentDate).format("YYYY-MM-DD HH:MM:SS");
      let params = `birthday=${birth}&userid=${this.userInfo.userid}`;
      this.axios.post("/users/birthchange", params).then(res => {
        if (res.data.code == 200) {
          Notify({
            type: "success",
            message: "年龄修改成功!",
          });
          this.updateOnceProperty({
            key: "birthday",
            value: birth,
          });
        }
      });
      this.dataClickShow = false;
      // let JSON.parse(sessionStorage.getItem('userIn'))
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar__left {
  .van-nav-bar__text {
    color: #fff;
  }
}
::v-deep .van-nav-bar .van-icon {
  color: #fff;
}

::v-deep .van-nav-bar__title {
  color: #fff;
}
::v-depp .van-nav-bar__text {
  color: #fff !important;
}
.nav {
  background-color: #36c14c;
  span {
    color: #fff;
  }
}
::v-deep .van-dialog__header {
  color: #36c14c;
}
::v-deep .van-dialog__content {
  text-align: center;
  input {
    padding: 0;
    outline: none;
    border: 0;
    text-align: center;
    padding: 25px;
  }
}

.van-icon {
  margin-left: 16px;
}
</style>
